<template>
    <div id="blog-tool">
      <div class="tool">
        <div class="to-top" @click="doTop">
          <img src="/images/top.png">
        </div>
        <div class="to-bottom" @click="doBottom">
          <img src="/images/bottom.png">
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
const doTop = () => {
  let nowTop = document.getElementById('app')?.scrollTop;
  if(nowTop!==undefined){
    let time = setInterval(()=>{
        if(nowTop>0){
            nowTop -= 50;
            const appDocument = document.getElementById('app')
            if(appDocument){
              appDocument.scrollTop = nowTop;
            }     
        }else{
          clearInterval(time)
        }
    },10)
  }
}
const doBottom = () => {
  let nowTop = document.getElementById('app')?.scrollTop;
  let mainHeight = document.getElementById('main')?.offsetHeight;
  if(nowTop!==undefined&&mainHeight!==undefined){
    let time = setInterval(()=>{
      if(nowTop<mainHeight){
          nowTop += 50;
          const appDocument = document.getElementById('app')
          if(appDocument){
            appDocument.scrollTop = nowTop;
          }  
      }else{
        clearInterval(time)
      }   
    },10)
  }
}
</script>

<style lang="less">
  #blog-tool{
    position:fixed;
    bottom:0;
    left:50%;
    margin-left:-525px;
    width:1050px;
    .tool{
      position:absolute;
      z-index:200;
      right:-110px;
      bottom:210px;
      width:42px;
    }
    .to-top,.to-bottom{
      cursor: pointer;
      height:42px;
      border-radius:6px;
      text-align:center;
      line-height:42px;
      background:rgba(255,255,255,0.6);
      &:hover{
        background:#FFF;
      }
      >img{
        margin-top:13px;
        width:18px;
      }
    }
    .to-top{
      margin-bottom:15px;
    }
  }
</style>